<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'银行卡'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="stageInfo.bank_name === undefined || stageInfo.bank_name === '' || stageInfo.bank_name === null ||
                    stageInfo.bank_open === undefined || stageInfo.bank_open === '' || stageInfo.bank_open === null ||
                    stageInfo.bank_account === undefined || stageInfo.bank_account === '' || stageInfo.bank_account === null ? '' : 'analyLightGreen'">银行信息</p>
            <div class="analyItemCon">
                <p class="col-md-6">
                        <span class="cLightGray pr8">开户行</span>
                        <span class="cLightGray pr8" v-if="flg==0">{{stageInfo.bank_open ? stageInfo.bank_open : ''}}</span>
                        <span v-if="flg==2">
                            <select id="set_stage_info_bank_open" v-model="bankOpen">
                                <option value="0">-请选择-</option>
                                <option value="工商银行">工商银行</option>
                                <option value="建设银行">建设银行</option>
                                <option value="农业银行">农业银行</option>
                                <option value="中国银行">中国银行</option>
                                <option value="光大银行">光大银行</option>
                                <option value="广发银行">广发银行</option>
                                <option value="浦发银行">浦发银行</option>
                                <option value="北京银行">北京银行</option>
                                <option value="民生银行">民生银行</option>
                                <option value="招商银行">招商银行</option>
                                <option value="交通银行">交通银行</option>
                                <option value="华夏银行">华夏银行</option>
                                <option value="兴业银行">兴业银行</option>
                                <option value="中信银行">中信银行</option>
                    </select>
                        </span>
                    </p>
                    <p class="col-md-6">
                        <span class="cLightGray pr8">姓名</span>
                        <span class="cLightGray pr8" v-if="flg==0">{{stageInfo.bank_name ? stageInfo.bank_name : ''}}</span>
                        <span v-if="flg==2">
                           <input type="text" class="width120 evaluateStandard" name="set_stage_info_bank_name" value="" v-model="bankName" >
                        </span>
                    </p>
                    <p class="col-md-6">
                        <span class="cLightGray pr8">账号</span>
                        <span class="cLightGray pr8" v-if="flg==0">{{stageInfo.bank_account ? stageInfo.bank_account : ''}}</span>
                        <span v-if="flg==2">
                            <input type="text" class="width150 evaluateStandard" name="set_stage_info_bank_account" value="" v-model="bankAccount">
                        </span>
                    </p>
                  <div class="imgbox imgbox1" style="position: absolute;margin-top: -10px;top:40px;right:8px" v-if="flg==0">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=2">
                    </div>
                   <div class="imgbox imgbox1" style="position: absolute;margin-top: -10px;top:40px;right:8px"  v-if="flg==2">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="saveThis(this)">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=0">
                    </div>
            </div>
        </div>


        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="JSON.stringify(this.photo9) === '{}' ||
                                JSON.stringify(this.photo11) === '{}' ? '' : 'analyLightGreen'">照片</p>
            <div class="analyItemCon">
                <div class="col-md-6">
                    <span  v-if="JSON.stringify(this.photo9) === '{}'" class="cLightGray col-md-3">银行卡正面</span>
                    <span class="cLightGray col-md-8">
                    <rx-upload v-if="photoFlg==1 && JSON.stringify(this.photo9) === '{}'" :data="{id: 11,attrModelid:9}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'70px', height: '60px'}" @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                    <rx-viewer v-else class="fl" >
                        <div   class="look_imgHover fl relative pb20 tx-center" style="width:78px;height:78px;" >
                        <img  :src="photo9.attrPhoto" />
                            <div class="upload_finish_div">
                                <div class="upload_finish_bg"></div>
                                <div class="upload_finish_linksm">
                                    <div class="dis-il-block">
                                        <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="photo9.attrPhoto"></a>
                                        <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo9.attr_infoid)"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="imgInfo tx-center">银行卡正面</div>
                        </div>
                    </rx-viewer>
                    </span>
                </div>
                <div class="col-md-6">
                    <span  v-if="JSON.stringify(this.photo11) === '{}'" class="cLightGray col-md-3">银行卡反面</span>
                    <span class="col-md-9">
                    <rx-upload v-if="photoFlg==1 && JSON.stringify(this.photo11) === '{}'" :data="{id: 11,attrModelid:11}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'70px', height: '60px'}" @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                    <rx-viewer v-else class="fl" >
                        <div    class="look_imgHover fl relative tx-center pb20" style="width:78px;height:78px;" >
                        <img  :src="photo11.attrPhoto" />
                            <div class="upload_finish_div">
                                <div class="upload_finish_bg"></div>
                                <div class="upload_finish_linksm">
                                    <div class="dis-il-block">
                                        <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="photo11.attrPhoto"></a>
                                        <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo11.attr_infoid)"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="imgInfo tx-center">银行卡反面</div>
                        </div>
                    </rx-viewer>
                    </span>
                </div>
            </div>
        </div>
    </div>
            <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="fl">
                    <span v-if="JSON.stringify(this.photo9) === '{}' ||
                                JSON.stringify(this.photo11) === '{}' ||
                    stageInfo.bank_name === undefined || stageInfo.bank_name === '' || stageInfo.bank_name === null ||
                    stageInfo.bank_open === undefined || stageInfo.bank_open === '' || stageInfo.bank_open === null ||
                    stageInfo.bank_account === undefined || stageInfo.bank_account === '' || stageInfo.bank_account === null" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>
        </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import {findStageInfoById, updateStageInfoByleId, savePhotoByUid, getUserPhotoList, delPhotoByUid} from '../../Resources/Api'
export default {
    data () {
        return {
            photo9: {},
            photo11: {},
            photoFlg: 1,
            elstyle: {width: '80px', height: '70px'},
            flg: 0,
            xieyiImgList: [],
            backiImgList: [],
            bankOpen: '', // 开户行
            bankName: '', // 姓名
            bankAccount: '', // 账号
            stageInfo: {},
            userInfoPhoto: {} // 照片回显
        }
    },
    created () {
        this.stageInfo = this.$route.query.stageInfo

        this.bankOpen = this.stageInfo.bank_open
        // alert(this.bankOpen)
        this.bankName = this.stageInfo.bank_name
        this.bankAccount = this.stageInfo.bank_account
        this.findStageInfoById() // 查询
        // this.updateStageInfoByleId() // 提交
        this.getUserPhotoList() // 银行卡回显
    },
    methods: {
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        delImg (value) {
            delPhotoByUid({
                attrInfoId: value
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('删除成功')
                    // this.getUserPhotoList()
                    // this.setUpdatePlate()
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('删除指定照片失败' + err)
            })
        },
        // 银行卡上传
        successUpload (value) {
            savePhotoByUid({
                uid: this.leftInfo.uid, // this.leftInfo.uid,
                attrModelid: value.data.attrModelid,
                userType: 1,
                attrServerUrl: '',
                attrFileUrl: value.src
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.$message('上传成功')
                    this.getUserPhotoList() // 银行卡回显
                    this.setUpdatePlate()
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 银行卡回显
        // getUserListinfoPhoto () {
        //     getUserListinfoPhoto({
        //         uid: this.leftInfo.uid // this.leftInfo.uid,
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             this.userInfoPhoto = res.data.Body
        //         }
        //         console.log(res.data.Body)
        //     }).catch(err => {
        //         console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
        //     })
        // },
        // 照片回显
        getUserPhotoList () {
            // let _this = this
            // _this.photo9 = {}
            getUserPhotoList({
                uid: this.leftInfo.uid // this.leftInfo.uid,
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.photoList = res.data.Body
                    if (this.photoList.length > 0) {
                        this.photoList.forEach(photo => {
                            if (Number(photo.attr_modelid) === 9) {
                                this.photo9 = photo
                            }
                            if (Number(photo.attr_modelid) === 11) {
                                this.photo11 = photo
                            }
                        })
                    }
                }
            }).catch(err => {
                console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
            })
        },
        // 获取所有信息
        findStageInfoById () {
            findStageInfoById({
                uid: this.leftInfo.uid // this.leftInfo.uid
            }).then(result => {
                this.stageInfo = result.data.Body
            }).catch(err => {
                console.log(err)
            })
        },
        // 点击上传
        saveThis () {
            if (this.bankOpen === null || this.bankOpen === '') {
                layer.msg('请输入开户行')
                return
            }
            if (this.bankName === null || this.bankName === '') {
                layer.msg('请输入名字')
                return
            }
            if (this.bankAccount === null || this.bankAccount === '') {
                layer.msg('请输入账户')
                return
            }
            updateStageInfoByleId({
                uid: this.leftInfo.uid, // this.leftInfo.uid
                bankOpen: this.bankOpen,
                bankName: this.bankName,
                bankAccount: this.bankAccount
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    layer.msg('提交成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('updateStageInfoByleId接口错误,错误信息为==' + err)
            })
        },
        sucessXie (value) {
            console.log(value)

            this.xieyiImgList.push(value.src)
            // this.xieyiImg = this.xieyiImgList.join(',')
        },
        sucessBack (value) {
            this.backiImgList.push(value.src)
            // this.xieyiImg = this.backiImgList.join(',')
        }
    },
    route () {
        this.flg = 0
    },
    computed: {
        ...mapGetters(['leftInfo'])
    }
}
</script>

